<script setup lang="ts">
import { ref } from "vue";
import type { TabsPaneContext } from 'element-plus';
import { Monitor, Setting, InfoFilled } from '@element-plus/icons-vue';
import WorkDisplay from "./WorkDisplay.vue";
import WorkSetting from "./WorkSetting.vue";
import WorkAbout from "./WorkAbout.vue";

const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>

<template>
  <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane name="first"> <template #label> <div class="mx-8 flex items-center px-2 text-base font-bold"> <el-icon size="large"><Monitor /></el-icon> <span class="ml-2">显示</span> </div> </template>
      <WorkDisplay/>
    </el-tab-pane>
    <el-tab-pane name="second"> <template #label> <div class="mx-8 flex items-center px-2 text-base font-bold"> <el-icon size="large"><Setting /></el-icon> <span class="ml-2">设置</span> </div> </template>
      <WorkSetting/>
    </el-tab-pane>
    <el-tab-pane name="third"> <template #label> <div class="mx-8 flex items-center px-2 text-base font-bold">  <el-icon size="large"> <InfoFilled /> </el-icon> <span class="ml-2">关于</span> </div> </template>
      <WorkAbout/>
    </el-tab-pane>
  </el-tabs>
</template>


<style>

</style>
